<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="Design.css"/>
    <script src="jquery-3.2.1.min.js"></script>
    <title>Title</title>


</head>
<body>

<!--todo -->
<!--1.要求卡片宽度578px-->
<!--2.窗口宽度 > 578px时，总是保证卡片处于正中心。-->
<!--3.主图 + 右下箭头 + icon(菜单/搜索/点赞/阅读/评论) 可以贴图，播放三角使用CSS实现。-->
<div class="top"></div>

<div class="warpper">
    <div class="bodyHead">
        <li class="headIconLeft"></li>
        <li class="headTitle">Design.</li>
        <li class="headIconRight"></li>
    </div>

    <div class="middlePic">
        <div class="middlePicTop"></div>
        <div class="videoStart">
            <div class="triangleRight"></div>
        </div>
    </div>

    <div class="under">
        <li class="A">Design is a journey of</li>
        <li class="B">Discovery</li>
        <div class="colorLine"></div>
        <div class="smallFont">
            <li class="C">Written by</li>
            <li class="D">William Hernandez.April 05 ,2017</li>
        </div>

        <div class="part">
            Part 1
        </div>

        <div class="icon">
            <li class="heart"><span>400</span></li>
            <li class="eyes"><span>12</span></li>
            <li class="massage"><span>275</span></li>
        </div>

        <div>
            <div class="foot-Font">1 of 5</div>
            <div class="right"></div>
        </div>

    </div>


</div>

<script>

    var warpperHTML = $('.warpper').prop('outerHTML');
    var i = 0;



    $.get('http://127.0.0.1:43765/', function (JSONString) {
        let dataList = JSON.parse(JSONString);
        var currentCard = null;




        var Select = function (dataList) {

            debugger;
            $('.middlePic').css('backgroundImage', 'url(' + dataList.banner + ')');
            $('.A').text(dataList.title);
            $('.B').text(dataList.highlight);
            $('.D').text(dataList.author + dataList.creatTime);
            $('.heart span').text(dataList.likes);
            $('.eyes span').text(dataList.views);
            $('.massage span').text(dataList.comments);
            $('.foot-Font').text(dataList.switch);
        };

        $('.warpper').remove();

        var createNewCard =  function(SWTICH){


            var card = $(warpperHTML);

            card.css({
                opacity:0,
            });
            card.find('.right').click(SWTICH);
            $(document.body).append(card);

            Select(dataList[i]);

            card.find('.foot-Font').text(i+1+' of 5');
            i++;
            if(i===5){
                i=0;
            }

            setTimeout(function(){
                card.css({
                    opacity:1,
                    marginLeft:-289+'px',
                });
            },10);

            return card;
        };


        var SWTICH = function () {

            var oldCard = currentCard;
            oldCard.css({
                opacity:0,
                marginLeft:-750+'px',
            });
            setTimeout(function(){
                oldCard.remove();
                currentCard = createNewCard(SWTICH);
            },300);

        };

        currentCard = createNewCard(SWTICH)

//        var i=1;
//
//        var deleteWarpper = function () {
//            var $warpper = $('.warpper');
//            $warpper.fadeOut(300);
//        };
//        var creatWarpper = function () {
//            setTimeout(function () {
//                if(i===5){
//                    i=1;
//                }else{
//                    i++;
//                }
//                var $body = $('body');
//                $body.append(newWarpper);
//                var $warpper = $('.warpper');
//                $warpper.fadeIn(300);
//                Select(dataList[i-1]);
//                $('.footFont').text(i+1+' of 5');
//            },350)
//        };
//
//        var changeWarpper = function () {
//            deleteWarpper();
//            creatWarpper();
//        };
//
//        Select(dataList[i-1]);
//        $('.Right').click(function () {
//            changeWarpper();
//        })
    });


</script>

</body>
</html>